<template>
	<div class="safetyIndexContent">
		<div class="strategyMenus">
			<div class="strategyMenusBut">
				<wj-Button type="save" @click="handleAdd">添加</wj-Button>
				<wj-Button type="save" @click="handleDeleteAll">批量删除</wj-Button>
				<wj-Button type="save" @click="handleAll_issueflow">批量下发</wj-Button>
				<!-- <wj-Button type="save" @click="handleAll_startUsing">批量启用</wj-Button>
				<wj-Button type="save" @click="handleAll_forbidden">批量禁用</wj-Button> -->
			</div>
			<div class="strategyMenusSearch">
				<el-input
					placeholder="请输关键字检索"
					type="text"
					v-model="searchValue"
					@keyup.enter.native="
						(e) => {
							e.target.blur();
						}
					"
					@blur="searchEvent"
				></el-input>
			</div>
		</div>
		<div class="strategyList">
			<el-table
				:data="tableData"
				style="width: 100%"
				:default-sort="{ prop: 'name', order: 'descending' }"
				@selection-change="handleSelectionChange"
				:row-class-name="'tableRowClassName'"
			>
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="name" label="防护规则" sortable width="180"> </el-table-column>
				<el-table-column prop="safetyInfo" label="规则内容"> </el-table-column>
				<!-- <el-table-column prop="status" label="规则开关" width="180">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							@change="handleSwitch(scope.row.status, scope.$index, scope.row)"
							active-color="#13ce66"
							inactive-color="#ff4949"
						>
						</el-switch>
					</template>
				</el-table-column> -->
				<el-table-column prop="terminalTotal" label="下发统计" width="180">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleSkip(scope.$index, scope.row)">{{ scope.row.terminalTotal }}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="240">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
						<el-link type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
						<el-link type="primary" v-if="scope.row.distributionNum > 0" @click="handleOpenIssue(scope.$index, scope.row)"
							>重新下发</el-link
						>
						<el-link type="primary" v-if="scope.row.distributionNum <= 0" @click="handleCloseIssue(scope.$index, scope.row)">下发</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="strategyPage">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[11]"
				:page-size="pageSize"
				layout="total, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</div>
		<!-- 自定义alertBox弹框——表单输入 -->
		<AlertBox :alertBoxVisible="alertBoxFormVisible">
			<div class="contentBox contentBoxAddSafety_class">
				<div class="contentBox_header">
					<p>添加安全防护规则</p>
					<i class="wj-icon-guanbi" @click="alertBoxFormclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoRow_form">
						<span>规则名称<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-input v-model="safetyAdd.ruleTitleName" placeholder="请输入规则名称" v-validate="'required'"></el-input>
						</div>
						<div class="form-hint">提示：请输入规则名称</div>
					</div>
					<div class="infoRow_form">
						<span>策略<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-select v-model="safetyAdd.controlTypeValue" placeholder="请选择策略">
								<el-option v-for="item in controlTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form">
						<span>发布端地址</span>
						<div class="form-item">
							<el-select v-model="safetyAdd.netmaskTargetValue" placeholder="请选择发布端地址" @change="handleNetmaskTargetAdd">
								<el-option v-for="item in netmaskTargetOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form" v-if="safetyAdd.netmaskTargetCustom == 1">
						<span>发布端地址</span>
						<div class="form-item">
							<el-input v-model="safetyAdd.netmaskTargetCustomValue" placeholder="请输入自定义发布端地址" v-validate="'ipAddr'"></el-input>
						</div>
						<div class="form-hint">提示：请输入自定义的发布端地址</div>
					</div>
					<div class="infoRow_form">
						<span>端口规则</span>
						<div class="form-item">
							<el-radio v-model="safetyAdd.portRule" label="0">按单个端口</el-radio>
							<el-radio v-model="safetyAdd.portRule" label="1">按端口范围</el-radio>
						</div>
					</div>
					<div class="infoRow_form_twice" v-if="safetyAdd.portRule == 0">
						<span>规则详情</span>
						<div class="form-item-twice">
							<div class="form-item-twice-row">
								<span>TCP端口</span>
								<div class="form-item-twice-input">
									<el-input v-model="safetyAdd.tcpPort" placeholder="请输入TCP端口" v-validate="'port'"></el-input>
								</div>
							</div>
							<div class="form-item-twice-row">
								<span>UDP端口</span>
								<div class="form-item-twice-input">
									<el-input v-model="safetyAdd.udpPort" placeholder="请输入UDP端口" v-validate="'port'"></el-input>
								</div>
							</div>
						</div>
						<div class="form-item-twice-hint">
							提示：请设定规则防护的端口范围： · 单个端口：80 · 多个端口：80,8080,443 · 端口范围：11000-12000
						</div>
					</div>
					<div class="infoRow_form_twice" v-if="safetyAdd.portRule == 1">
						<span>规则详情</span>
						<div class="form-item-twice">
							<div class="form-item-twice-row">
								<span>TCP端口</span>
								<div class="form-item-twice-input">
									<pre>  从  </pre>
									<el-input v-model="safetyAdd.tcpStartPort" placeholder="请输入起始TCP端口" v-validate="'port'"></el-input>
									<pre>  至  </pre>
									<el-input v-model="safetyAdd.tcpEndPort" placeholder="请输入结束TCP端口" v-validate="'port'"></el-input>
								</div>
							</div>
							<div class="form-item-twice-row">
								<span>UDP端口</span>
								<div class="form-item-twice-input">
									<pre>  从  </pre>
									<el-input v-model="safetyAdd.udpStartPort" placeholder="请输入起始UDP端口" v-validate="'port'"></el-input>
									<pre>  至  </pre>
									<el-input v-model="safetyAdd.udpEndPort" placeholder="请输入结束UDP端口" v-validate="'port'"></el-input>
								</div>
							</div>
						</div>
						<div class="form-item-twice-hint">
							提示：请设定规则防护的端口范围： · 单个端口：80 · 多个端口：80,8080,443 · 端口范围：11000-12000
						</div>
					</div>
					<div class="infoRow_form">
						<span>管控方向<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-select v-model="safetyAdd.controlDirectionValue" placeholder="请选择管控方向">
								<el-option v-for="item in controlDirectionOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
						<div class="form-hint">提示：请选择规则防护的方向</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" v-checksubmit="{ submitEvent: handleAddConfirm, cls: 'contentBoxAddSafety_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——编辑 -->
		<AlertBox :alertBoxVisible="alertBoxEditVisible">
			<div class="contentBox contentBoxDetailsSafety_class">
				<div class="contentBox_header">
					<p>编辑安全防护规则</p>
					<i class="wj-icon-guanbi" @click="alertBoxEditclose"></i>
				</div>
				<div class="contentBox_body">
					<!-- <div class="infoRow_form">
						<span>防护规则ID</span>
						<span class="form-span">15601773901385740</span>
					</div> -->
					<div class="infoRow_form">
						<span>规则名称<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-input v-model="safetyEdit.ruleTitleName" placeholder="请输入规则名称"></el-input>
						</div>
						<div class="form-hint">提示：请输入规则名称</div>
					</div>
					<div class="infoRow_form">
						<span>策略<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-select v-model="safetyEdit.controlTypeValue" placeholder="请选择策略">
								<el-option v-for="item in controlTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form">
						<span>发布端地址</span>
						<div class="form-item">
							<el-select v-model="safetyEdit.netmaskTargetValue" placeholder="请选择发布端地址" @change="handleNetmaskTargetEdit">
								<el-option v-for="item in netmaskTargetOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
					</div>
					<div class="infoRow_form" v-if="safetyEdit.netmaskTargetCustom == 1">
						<span>发布端地址</span>
						<div class="form-item">
							<el-input v-model="safetyEdit.netmaskTargetCustomValue" placeholder="请输入自定义的发布端地址" v-validate="'ipAddr'"></el-input>
						</div>
						<div class="form-hint">提示：请输入自定义的发布端地址</div>
					</div>
					<div class="infoRow_form">
						<span>端口规则</span>
						<div class="form-item">
							<el-radio v-model="safetyEdit.portRule" label="0">按单个端口</el-radio>
							<el-radio v-model="safetyEdit.portRule" label="1">按端口范围</el-radio>
						</div>
					</div>
					<div class="infoRow_form_twice" v-if="safetyEdit.portRule == 0">
						<span>规则详情</span>
						<div class="form-item-twice">
							<div class="form-item-twice-row">
								<span>TCP端口</span>
								<div class="form-item-twice-input">
									<el-input v-model="safetyEdit.tcpPort" placeholder="请输入TCP端口" v-validate="'port'"></el-input>
								</div>
							</div>
							<div class="form-item-twice-row">
								<span>UDP端口</span>
								<div class="form-item-twice-input">
									<el-input v-model="safetyEdit.udpPort" placeholder="请输入UDP端口" v-validate="'port'"></el-input>
								</div>
							</div>
						</div>
						<div class="form-item-twice-hint">
							提示：请设定规则防护的端口范围： · 单个端口：80 · 多个端口：80,8080,443 · 端口范围：11000-12000
						</div>
					</div>
					<div class="infoRow_form_twice" v-if="safetyEdit.portRule == 1">
						<span>规则详情</span>
						<div class="form-item-twice">
							<div class="form-item-twice-row">
								<span>TCP端口</span>
								<div class="form-item-twice-input">
									<pre>  从  </pre>
									<el-input v-model="safetyEdit.tcpStartPort" placeholder="请输入起始TCP端口" v-validate="'port'"></el-input>
									<pre>  至  </pre>
									<el-input v-model="safetyEdit.tcpEndPort" placeholder="请输入结束TCP端口" v-validate="'port'"></el-input>
								</div>
							</div>
							<div class="form-item-twice-row">
								<span>UDP端口</span>
								<div class="form-item-twice-input">
									<pre>  从  </pre>
									<el-input v-model="safetyEdit.udpStartPort" placeholder="请输入起始UDP端口" v-validate="'port'"></el-input>
									<pre>  至  </pre>
									<el-input v-model="safetyEdit.udpEndPort" placeholder="请输入结束UDP端口" v-validate="'port'"></el-input>
								</div>
							</div>
						</div>
						<div class="form-item-twice-hint">
							提示：请设定规则防护的端口范围： · 单个端口：80 · 多个端口：80,8080,443 · 端口范围：11000-12000
						</div>
					</div>
					<div class="infoRow_form">
						<span>管控方向<b style="color:rgb(248, 4, 4);">*</b></span>
						<div class="form-item">
							<el-select v-model="safetyEdit.controlDirectionValue" placeholder="请选择管控方向">
								<el-option v-for="item in controlDirectionOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</div>
						<div class="form-hint">提示：请选择规则防护的方向</div>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save"  v-checksubmit="{ submitEvent: handleEditConfirm, cls: 'contentBoxDetailsSafety_class' }">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import {
	safety_all,
	safety_delete,
	safety_all_delete,
	safety_forbidden,
	safety_startUsing,
	safety_all_forbidden,
	safety_all_startUsing,
	safety_add,
	safety_update,
} from "@/utils/request/api";
export default {
	name: "SafetyIndex",
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [
				// {
				// 	safetyRule: "封禁系统保留端口",
				// 	ruleContent: "[允许入站]TCP 1-1024",
				// 	ruleSwitch: true,
				// 	ruleStatistics: "123/234",
				// },
				// {
				// 	safetyRule: "封禁系统保留端口",
				// 	ruleContent: "[允许入站]TCP 1-1024",
				// 	ruleSwitch: false,
				// 	ruleStatistics: "123/234",
				// },
				// {
				// 	safetyRule: "封禁系统保留端口",
				// 	ruleContent: "[允许入站]TCP 1-1024",
				// 	ruleSwitch: false,
				// 	ruleStatistics: "123/234",
				// },
				// {
				// 	safetyRule: "封禁系统保留端口",
				// 	ruleContent: "[允许入站]TCP 1-1024",
				// 	ruleSwitch: false,
				// 	ruleStatistics: "123/234",
				// },
				// {
				// 	safetyRule: "封禁系统保留端口",
				// 	ruleContent: "[允许入站]TCP 1-1024",
				// 	ruleSwitch: true,
				// 	ruleStatistics: "123/234",
				// },
			],
			multipleSelection: [],
			// 自定义弹窗控制——表单输入
			alertBoxFormVisible: false,
			// 自定义弹窗控制——编辑
			alertBoxEditVisible: false,
			// 新增
			safetyAdd: {
				ruleTitleName: "",
				controlTypeValue: "允许",
				netmaskTargetValue: "0.0.0.0/0",
				netmaskTargetCustom: 0,
				netmaskTargetCustomValue: "",
				portRule: "0",
				tcpPort: "",
				udpPort: "",
				tcpStartPort: "",
				tcpEndPort: "",
				udpStartPort: "",
				udpEndPort: "",
				controlDirectionValue: "入站",
			},
			// 编辑
			safetyEdit: {
				id: "",
				ruleTitleName: "",
				controlTypeValue: "允许",
				netmaskTargetValue: "0.0.0.0/0",
				netmaskTargetCustom: 0,
				netmaskTargetCustomValue: "",
				portRule: "0",
				tcpPort: "",
				udpPort: "",
				tcpStartPort: "",
				tcpEndPort: "",
				udpStartPort: "",
				udpEndPort: "",
				controlDirectionValue: "入站",
			},
			// 管控方式 0禁止  1允许
			controlTypeOptions: [
				{
					value: "允许",
					label: "允许",
				},
				{
					value: "禁止",
					label: "禁止",
				},
			],
			// 目标子网
			netmaskTargetOptions: [
				{
					value: "0.0.0.0/0",
					label: "0.0.0.0/0",
				},
				{
					value: "10.0.0.0/8",
					label: "10.0.0.0/8",
				},
				{
					value: "172.16.0.0/16",
					label: "172.16.0.0/16",
				},
				{
					value: "192.168.0.0/24",
					label: "192.168.0.0/24",
				},
				{
					value: "自定义",
					label: "自定义",
				},
			],
			// 管控方向 0入站  1出站  2双向
			controlDirectionOptions: [
				{
					value: "入站",
					label: "入站",
				},
				{
					value: "出站",
					label: "出站",
				},
				{
					value: "双向",
					label: "双向",
				},
			],
		};
	},
	created() {},
	mounted() {
		this.getAllSafety(this.pageNum, this.pageSize);
	},
	methods: {
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.getSearchSafety(this.pageNum, this.pageSize, this.searchValue);
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.searchValue != "") {
				this.getSearchSafety(val, this.pageSize, this.searchValue);
			} else {
				this.getAllSafety(val, this.pageSize);
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 目标子网——新增自定义
		handleNetmaskTargetAdd(value) {
			console.log(value);
			if (value == "自定义") {
				this.safetyAdd.netmaskTargetCustom = 1;
			} else {
				this.safetyAdd.netmaskTargetCustom = 0;
			}
		},
		// 目标子网——编辑自定义
		handleNetmaskTargetEdit(value) {
			console.log(value);
			if (value == "自定义") {
				this.safetyEdit.netmaskTargetCustom = 1;
			} else {
				this.safetyEdit.netmaskTargetCustom = 0;
			}
		},
		// 编辑
		handleEdit(index, row) {
			console.log(index, row);
			this.alertBoxEditVisible = true;
			this.safetyEdit.id = row.id;
			this.safetyEdit.ruleTitleName = row.name;
			this.safetyEdit.controlTypeValue = row.way == 0 ? "禁止" : "允许";
			this.safetyEdit.netmaskTargetValue = this.echoNetmaskTargeFun(row.target).netmaskTargetValue;
			this.safetyEdit.netmaskTargetCustom = this.echoNetmaskTargeFun(row.target).netmaskTargetCustom;
			this.safetyEdit.netmaskTargetCustomValue = this.echoNetmaskTargeFun(row.target).netmaskTargetCustomValue;
			this.safetyEdit.portRule = row.type.toString();
			this.safetyEdit.tcpPort = this.echoPortFun(row.type, row.tcpPort, row.udpPort).tcpPort;
			this.safetyEdit.udpPort = this.echoPortFun(row.type, row.tcpPort, row.udpPort).udpPort;
			this.safetyEdit.tcpStartPort = this.echoPortFun(row.type, row.tcpPort, row.udpPort).tcpStartPort;
			this.safetyEdit.tcpEndPort = this.echoPortFun(row.type, row.tcpPort, row.udpPort).tcpEndPort;
			this.safetyEdit.udpStartPort = this.echoPortFun(row.type, row.tcpPort, row.udpPort).udpStartPort;
			this.safetyEdit.udpEndPort = this.echoPortFun(row.type, row.tcpPort, row.udpPort).udpEndPort;
			this.safetyEdit.controlDirectionValue = this.echoControlDirectionFun(row.direction);
		},
		// 编辑——确定
		handleEditConfirm() {
			safety_update({
				id: this.safetyEdit.id,
				name: this.safetyEdit.ruleTitleName,
				way: this.controlTypeFun(this.safetyEdit.controlTypeValue),
				target: this.netmaskTargeFun(this.safetyEdit),
				type: parseInt(this.safetyEdit.portRule),
				tcpPort: this.singlePortFun(this.safetyEdit).tcpPort,
				udpPort: this.singlePortFun(this.safetyEdit).udpPort,
				direction: this.controlDirectionFun(this.safetyEdit.controlDirectionValue),
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("安全防护修改成功！");
					this.alertBoxEditVisible = false;
					this.getAllSafety(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("安全防护修改失败！");
				}
			});
		},
		// 回填目标子网数据（可能是自定义）
		echoNetmaskTargeFun(value) {
			var echoObj = {};
			var bool = this.netmaskTargetOptions.some((item) => {
				if (item.value == value) {
					return true;
				}
			});
			if (bool) {
				echoObj.netmaskTargetValue = value;
				echoObj.netmaskTargetCustom = 0;
				echoObj.netmaskTargetCustomValue = "";
			} else {
				echoObj.netmaskTargetValue = "自定义";
				echoObj.netmaskTargetCustom = 1;
				echoObj.netmaskTargetCustomValue = value;
			}
			return echoObj;
		},
		// 单个端口和端口范围拆分回填
		echoPortFun(type, tcpPort, udpPort) {
			var echoObj = {};
			if (type == "0") {
				echoObj.tcpPort = tcpPort;
				echoObj.udpPort = udpPort;
				echoObj.tcpStartPort = "";
				echoObj.tcpEndPort = "";
				echoObj.udpStartPort = "";
				echoObj.udpEndPort = "";
			} else if (type == "1") {
				echoObj.tcpStartPort = tcpPort.split(":")[0];
				echoObj.tcpEndPort = tcpPort.split(":")[1];
				echoObj.udpStartPort = udpPort.split(":")[0];
				echoObj.udpEndPort = udpPort.split(":")[1];
				echoObj.tcpPort = "";
				echoObj.udpPort = "";
			}
			return echoObj;
		},
		// 管控方向转换成string
		echoControlDirectionFun(value) {
			var text;
			if (value == 0) {
				text = "入站";
			} else if (value == 1) {
				text = "出站";
			} else if (value == 2) {
				text = "双向";
			}
			return text;
		},
		// 删除
		handleDelete(index, row) {
			console.log(index, row);
			this.deleteSafetyEvery(row.id);
		},
		// 重新下发
		handleOpenIssue(index, row) {
			console.log(index, row);
			this.$router.push(
				{ name: "IssueflowIndex", params: { type: 0, safetyId: row.id } },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 下发
		handleCloseIssue(index, row) {
			console.log(index, row);
			this.$router.push(
				{ name: "IssueflowIndex", params: { type: 0, safetyId: row.id } },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 批量下发
		handleAll_issueflow() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(idList);
				this.$router.push(
					{ name: "IssueflowIndex", params: { type: 0, safetyIdList: idList } },
					(onComplete) => {
						console.log(onComplete);
					},
					(onabort) => {
						console.log(onabort);
					}
				);
			}
		},
		// 跳转下发流程页面
		handleSkip(index, row) {
			console.log(index, row);
			this.$router.push(
				{ name: "IssueflowIndex", params: { type: 0, safetyId: row.id } },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 表格中的开关——变化事件
		handleSwitch(newValue, index, row) {
			console.log(newValue);
			console.log(index);
			console.log(row);
			if (newValue == true) {
				safety_startUsing({
					id: row.id,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("安全防护开启成功！");
						this.getAllSafety(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("安全防护开启失败！");
					}
				});
			} else if (newValue == false) {
				safety_forbidden({
					id: row.id,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("安全防护禁用成功！");
						this.getAllSafety(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("安全防护禁用失败！");
					}
				});
			}
		},
		// 添加
		handleAdd() {
			this.alertBoxFormVisible = true;
		},
		// 初始化新增数据
		initSafetyAdd() {
			this.safetyAdd = {
				ruleTitleName: "",
				controlTypeValue: "允许",
				netmaskTargetValue: "0.0.0.0/0",
				netmaskTargetCustomValue: "",
				portRule: "1",
				tcpPort: "",
				udpPort: "",
				tcpStartPort: "",
				tcpEndPort: "",
				udpStartPort: "",
				udpEndPort: "",
				controlDirectionValue: "入站",
			};
		},
		// 添加——确定
		handleAddConfirm() {
			safety_add({
				name: this.safetyAdd.ruleTitleName,
				way: this.controlTypeFun(this.safetyAdd.controlTypeValue),
				target: this.netmaskTargeFun(this.safetyAdd),
				type: parseInt(this.safetyAdd.portRule),
				tcpPort: this.singlePortFun(this.safetyAdd).tcpPort,
				udpPort: this.singlePortFun(this.safetyAdd).udpPort,
				direction: this.controlDirectionFun(this.safetyAdd.controlDirectionValue),
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("安全防护添加成功！");
					this.alertBoxFormVisible = false;
					this.initSafetyAdd();
					this.getAllSafety(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("安全防护添加失败！");
				}
			});
		},
		// 目标子网的值（将新增数据/编辑数据中的目标子网的值吐出来）
		netmaskTargeFun(obj) {
			var value;
			if (obj.netmaskTargetCustom == 1) {
				value = obj.netmaskTargetCustomValue;
			} else {
				value = obj.netmaskTargetValue;
			}
			return value;
		},
		// 管控方式转换number
		controlTypeFun(value) {
			var number;
			if (value == "允许") {
				number = 1;
			} else if (value == "禁止") {
				number = 0;
			}
			return number;
		},
		// 管控方向转换number
		controlDirectionFun(value) {
			var number;
			if (value == "入站") {
				number = 0;
			} else if (value == "出站") {
				number = 1;
			} else if (value == "双向") {
				number = 2;
			}
			return number;
		},
		// 单个端口
		singlePortFun(obj) {
			var objPort = {};
			if (parseInt(obj.portRule) == 0) {
				objPort.tcpPort = obj.tcpPort;
				objPort.udpPort = obj.udpPort;
			} else if (parseInt(obj.portRule) == 1) {
				objPort.tcpPort = obj.tcpStartPort + ":" + obj.tcpEndPort;
				objPort.udpPort = obj.udpStartPort + ":" + obj.udpEndPort;
			}
			return objPort;
		},
		// 批量删除
		handleDeleteAll() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					idList.push(item.id);
				});
				console.log(decodeURIComponent(idList));
				safety_all_delete({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("安全防护批量删除成功！");
						this.getAllSafety(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("安全防护批量删除失败！");
					}
				});
			}
		},
		// 批量启用
		handleAll_startUsing() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					if (item.status == false) {
						idList.push(item.id);
					}
				});
				console.log(decodeURIComponent(idList));
				safety_all_startUsing({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("安全防护批量启用成功！");
						this.getAllSafety(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("安全防护批量启用失败！");
					}
				});
			}
		},
		// 批量禁用
		handleAll_forbidden() {
			console.log(this.multipleSelection);
			if (this.multipleSelection.length > 0) {
				var idList = [];
				this.multipleSelection.forEach((item) => {
					if (item.status == true) {
						idList.push(item.id);
					}
				});
				console.log(decodeURIComponent(idList));
				safety_all_forbidden({
					idList: decodeURIComponent(idList),
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("安全防护批量禁用成功！");
						this.getAllSafety(this.pageNum, this.pageSize);
					} else {
						this.$msg.error("安全防护批量禁用失败！");
					}
				});
			}
		},
		// alertBox——表单输入 关闭
		alertBoxFormclose() {
			this.alertBoxFormVisible = false;
			this.initSafetyAdd();
		},
		// alertBox——编辑 关闭
		alertBoxEditclose() {
			this.alertBoxEditVisible = false;
		},
		// 查询所有安全防护
		getAllSafety(page, size) {
			safety_all({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				this.tableData = this.transitionListData(res.data.result);
				this.total = res.data.total;
			});
		},
		// 关键字搜索
		getSearchSafety(page, size, value) {
			safety_all({
				page: page,
				size: size,
				keyword: value,
			}).then((res) => {
				console.log(res);
				this.tableData = this.transitionListData(res.data.result);
				this.total = res.data.total;
			});
		},
		// 删除单个安全防护
		deleteSafetyEvery(id) {
			safety_delete({
				id: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("安全防护删除成功！");
					this.getAllSafety(this.pageNum, this.pageSize);
				} else {
					this.$msg.error("安全防护删除失败！");
				}
			});
		},
		// 将返回的数据列表中的开关状态0/1 转成true/false
		transitionListData(list) {
			list.forEach((element) => {
				if (element.status == 0) {
					element.status = true;
				} else if (element.status == 1) {
					element.status = false;
				}
			});
			return list;
		},
	},
};
</script>
<style lang="less" scoped>
.safetyIndexContent {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.strategyMenusBut {
			width: 85%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			[class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 18px;
				margin-right: 12px;
			}
		}
		.strategyMenusSearch {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			/deep/ .el-input {
				font-size: 16px;
			}
		}
	}
	.strategyList {
		width: 100%;
		height: calc(100% - 48px - 48px);
		padding: 28px 0;
		box-sizing: border-box;

		/deep/ .el-table {
			border-left: 1px solid #ebeef5;
			border-right: 1px solid #ebeef5;
			border-top: 1px solid #ebeef5;
		}
		/deep/ .el-link {
			margin: 0 12px 0 0;
		}
		/deep/ .el-table .forbidden-row-in .cell {
			color: #818d23;
		}
		/deep/ .el-table .forbidden-row-off .cell {
			color: #f6a031;
		}
	}
	.strategyPage {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
